<template>
    <!--按钮操作组-->
    <el-table-column ref="fixedColumn" label="操作" prop="operates" header-align="center"
                     :align="operates.align || 'left'" :width="operates.width"
                     :fixed="operates.fixed" v-if="showOperates">
        <template slot-scope="scope">
            <div class="operate-group">
                <template v-for="(btn, key) in operates.list">
                    <div class="item" v-if="btn.show && (!btn.filter || btn.filter(scope.row, key))"
                         :key="key" v-permission="btn.permission">
                        <template v-if="btn.tooltip">
                            <el-tooltip :effect="btn.tooltip.effect" :content="btn.tooltip.content"
                                        :placement="btn.tooltip.placement"
                                        :disabled="btn.disabled || btn.tooltip.disabled"
                                        :offset="btn.tooltip.offset" :transition="btn.tooltip.transition"
                                        :visible-arrow="btn.tooltip.visibleArrow"
                                        :popper-options="btn.tooltip.popperOptions"
                                        :open-delay="btn.tooltip.openDelay" :manual="btn.tooltip.manual"
                                        :popper-class="btn.tooltip.popperClass"
                                        :enterable="btn.tooltip.enterable"
                                        :hide-after="btn.tooltip.hideAfter">
                                <el-button v-if="$utils.isNotEmpty(btn.label)"
                                           :type="getBtnField(btn.type,scope.row, scope)"
                                           :size="getBtnField(btn.size,scope.row, scope)"
                                           :icon="getBtnField(btn.icon,scope.row, scope)"
                                           :disabled="getBtnField(btn.disabled,scope.row, scope)"
                                           :plain="getBtnField(btn.plain,scope.row, scope)"
                                           @click.native.prevent="btn.method(key, scope.row, scope.$index)"
                                           v-permission="btn.permission">
                                    {{ btn.label }}
                                </el-button>
                                <el-button v-else :type="getBtnField(btn.type,scope.row, scope)"
                                           :size="getBtnField(btn.size,scope.row, scope)"
                                           :icon="getBtnField(btn.icon,scope.row, scope)"
                                           :disabled="getBtnField(btn.disabled,scope.row, scope)"
                                           :plain="getBtnField(btn.plain,scope.row, scope)"
                                           @click.native.prevent="btn.method(key, scope.row, scope.$index)"/>
                            </el-tooltip>
                        </template>
                        <template v-else>
                            <el-button v-if="$utils.isNotEmpty(btn.label)"
                                       :type="getBtnField(btn.type,scope.row, scope)"
                                       :size="getBtnField(btn.size,scope.row, scope)"
                                       :icon="getBtnField(btn.icon,scope.row, scope)"
                                       :disabled="getBtnField(btn.disabled,scope.row, scope)"
                                       :plain="getBtnField(btn.plain,scope.row, scope)"
                                       @click.native.prevent="btn.method(key, scope.row, scope.$index)">
                                {{ btn.label }}
                            </el-button>
                            <el-button v-else :type="getBtnField(btn.type,scope.row, scope)"
                                       :size="getBtnField(btn.size,scope.row, scope)"
                                       :icon="getBtnField(btn.icon,scope.row, scope)"
                                       :disabled="getBtnField(btn.disabled,scope.row, scope)"
                                       :plain="getBtnField(btn.plain,scope.row, scope)"
                                       @click.native.prevent="btn.method(key, scope.row, scope.$index)"/>
                        </template>
                    </div>
                </template>
            </div>
        </template>
    </el-table-column>
</template>

<script>
export default {
    name: "OperateColumn",
    props: {
        operates: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {};
    },
    computed: {
        btnList() {
            if (this.operates.list) {
                return this.operates.list.filter(_x => _x.show === true);
            }
            return [];
        },
        showOperates() {
            return this.$utils.isNotEmptyList(this.btnList);
        },
    },
    methods: {
        getBtnField(field, row, scope) {
            if (typeof field === 'function') {
                field = field(row, scope)
            }
            return field
        },
    },
}
</script>

<style scoped>

</style>
